<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>栅格系统</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
	<style>

a:focus{
outline:none;
}

}
	</style>
	
	</head>
<body style="margin:200px">


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">轮播插件</p>

<div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:500px"> 
<ol class="carousel-indicators">

      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

     <li data-target="#myCarousel" data-slide-to="1"></li>
	 <li data-target="#myCarousel" data-slide-to="2"></li>

</ol>

<div class="carousel-inner">
      <div class="item active">
              <img src="__ROOT__/static/note/img/7.jpg" alt="第一张"> </div>

    <div class="item">

              <img src="__ROOT__/static/note/img/7.jpg" alt="第二张"> </div>

  <div class="item">

             <img src="__ROOT__/static/note/img/7.jpg" alt="第三张"> </div>

  </div>
 
<a href="#myCarousel" data-slide="prev" class="carousel-control left">
     <span class="glyphicon glyphicon-chevron-left"></span>
	 </a>
<a href="#myCarousel" data-slide="next" class="carousel-control right"><span class="glyphicon glyphicon-chevron-right"></span>
</a>



</div>

<br/>
<p>data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放。</p>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">轮播插件2 js控制</p>

<div id="myCarousel1" class="carousel slide"  style="width:500px"> 
<ol class="carousel-indicators">

      <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>

     <li data-target="#myCarousel1" data-slide-to="1"></li>
	 <li data-target="#myCarousel1" data-slide-to="2"></li>

</ol>

<div class="carousel-inner">
      <div class="item active">
              <img src="__ROOT__/static/note/img/7.jpg" alt="第一张"> </div>

    <div class="item">

              <img src="__ROOT__/static/note/img/7.jpg" alt="第二张"> </div>

  <div class="item">

             <img src="__ROOT__/static/note/img/7.jpg" alt="第三张"> </div>

  </div>

<a href="#myCarousel1" data-slide="prev" class="carousel-control left">&lsaquo;</a>

<a href="#myCarousel1" data-slide="next" class="carousel-control right">&rsaquo;</a>

</div>

<br/>







<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#myCarousel1').carousel({

//设置自动播放/2 秒

interval : 2000,

//设置暂停按钮的事件

pause : 'hover',

//只播一次false 轮播 true

wrap : true,

});






</script>



</body>
</html>